<template>
	<div class="container">
		<p class="title-label title_text">数据统计</p>
		<div class="content_wrap">
			<AplidCharts type="BasicBar" :option="option" style="height: 100%" ref="chartBarEl"></AplidCharts>
		</div>
	</div>
</template>

<script setup lang="ts">
let colors = ['#0052D9', '#00A870', '#ED7B2F']
const itemStyle = {
	barBorderRadius: [4, 4, 0, 0],
	emphasis: {
		shadowBlur: 10,
		shadowOffsetX: 0,
		shadowColor: 'rgba(0, 0, 0, 0.3)',
	},
}
const option = {
	color: colors,
	dataset: {
		source: [
			['product', '服务对象', '从业人员', '志愿者'],
			['玄武区', 43.3, 85.8, 93.7],
			['秦淮区', 83.1, 73.4, 55.1],
			['建邺区', 86.4, 65.2, 82.5],
			['鼓楼区', 72.4, 53.9, 39.1],
			['浦口区', 72.4, 53.9, 39.1],
			['栖霞区', 72.4, 53.9, 39.1],
			['雨花台区', 72.4, 53.9, 39.1],
			['江宁区', 72.4, 53.9, 39.1],
			['六合区', 72.4, 53.9, 39.1],
			['溧水区', 72.4, 53.9, 39.1],
			['高淳区', 72.4, 53.9, 39.1],
		],
	},
	series: [
		{
			type: 'bar',
			itemStyle,
		},
		{
			type: 'bar',
			itemStyle,
		},
		{
			type: 'bar',
			itemStyle,
		},
	],
}
</script>

<style lang="scss" scoped>
.container {
	width: 100%;
	height: 100%;
	.title_text {
		height: 42px;
		display: flex;
		align-items: center;
		margin-top: 10px;
	}

	.content_wrap {
    height:calc(100% - 52px);
		border-radius: 10px;
		background: #fff;
	}
}
</style>
